<!DOCTYPE html>
<!-- saved from url=(0016)http://localhost -->
<html>
  <head>
    <meta charset="utf-8"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <title>filter</title>
    <style>
        body{
            margin: 0;
        }
        #content-info{
            width: auto;
            margin: 0 auto;
            text-align: center;
        }
        #author-info{
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        #title{
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            padding-top: 10px;
            margin-bottom: 2px;
            font-size: 34px;
            color: #505050;
        }
        .text{
            white-space:nowrap;
            text-overflow: ellipsis;
            display: inline-block;
            margin-right: 20px;
            margin-bottom: 2px;
            font-size: 20px;
            color: #8c8c8c;
        }
        #navBar{
            position: fixed;
            right:0;
            bottom: 0;
            background-color: #f0f3f4;
            overflow-y: auto;
            text-align: center;
        }
        #svg-container{
            width: 100%;
            min-width: 0;
            margin: 0 10px;
        }
        #nav-thumbs{
            padding: 0 5px;
        }
        .nav-thumb{
            position: relative;
            margin: 10px auto;
        }
        .nav-thumb >p{
            text-align: center;
            font-size: 12px;
            margin: 4px 0 0 0;
        }
        .nav-thumb >div{
            position: relative;
            display: inline-block;
            border: 1px solid #c6cfd5;
        }
        .nav-thumb img{
            display: block;
        }
        .nav-thumb span{
            pointer-events: none;
        }
        #main-content{
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #d0cfd8;
            display: flex;
            height: auto;
            flex-flow: row wrap;
            text-align:center;
        }
        #svg-container >svg{
            display: block;
            margin:10px auto;
            margin-bottom: 0;
        }
        #copyright{
            bottom: 0;
            left: 50%;
            margin: 5px auto;
            font-size: 16px;
            color: #515151;
        }
        #copyright >a{
            text-decoration: none;
            color: #77C;
        }
        .number{
            position: absolute;
            top:0;
            left:0;
            border-top:22px solid #76838f;
            border-right: 22px solid transparent;
        }
        .pagenum{
            font-size: 12px;
            color: #fff;
            position: absolute;
            top: -23px;
            left: 2px;
        }
        #navBar::-webkit-scrollbar{
            width: 8px;
            background-color: #f5f5f5;
        }
        #navBar::-webkit-scrollbar-track{
            -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.3);
            border-radius: 8px;
            background-color: #fff;
        }
        #navBar::-webkit-scrollbar-thumb{
            border-radius: 8px;
            -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.3);
            background-color: #6b6b70;
        }
        #navBar::-webkit-scrollbar-thumb:hover{
            background-color: #4a4a4f;
        }
        .nav-thumb >div:hover{
            box-shadow:1px 1px 4px rgba(0,0,0,.4);
        }
        .selected .number{
            border-color: #08a1ef transparent;
        }
</style>
  </head>
  <body>
    <div id="main-area">
      <div id="content-info">
        <div id="title">责任链模式 demo —— filter</div>
        <div id="author-info">
          <div id="author-name" class="text">yonyong</div>
          <div id="share-time" class="text">2020-08-10</div>
        </div>
      </div>
      <div id="main-content">
        <div id="svg-container"><svg xmlns:ev="http://www.w3.org/2001/xml-events" height="793" width="1122" id="page1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRadio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1123 794"><style type="text/css"><![CDATA[
.st1 {fill:#303030;font-family:宋体;font-size:10pt}
.st2 {fill:#303030;font-family:宋体;font-size:14pt;font-weight:bold}
]]></style><defs><linearGradient id="lg1" y2="100%" x2="0%" y1="0%" x1="0%"><stop offset="0" stop-color="#ffffff"/><stop offset="1" stop-color="#efefef"/></linearGradient><linearGradient id="lg2" y2="100%" x2="0%" y1="0%" x1="0%"><stop offset="0" stop-color="#fbfbfb"/><stop offset="1" stop-color="#efefef"/></linearGradient></defs><rect height="794" width="1123" x="0" y="0" fill="#ffffff" stroke="#808080"/><g id="shape1" transform="matrix(0,-1,1,0,456.8,581)"><path d="M-2,51.2L47.2,2L47.2,31.5L485,31.5L485,70.8L47.2,70.8L47.2,100.3L-2,51.2z" fill="#000000" fill-opacity="0.08"/><path d="M0,49.2L49.2,0L49.2,29.5L487,29.5L487,68.8L49.2,68.8L49.2,98.3L0,49.2z" fill="url(#lg1)" stroke="#6d6d6d"/><text class="st1"><tspan x="198" y="53.7">多线程异步执行</tspan></text></g><g id="shape2" transform="translate(543,132)"><text class="st2"><tspan x="25" y="28.5">FilterChain</tspan></text></g><g id="shape3" transform="translate(349.61,154.81)"><path d="M2,19.5L86.2,19.5L86.2,2L115.4,31.2L86.2,60.4L86.2,42.9L2,42.9" fill="#000000" fill-opacity="0.08"/><path d="M0,17.5L84.2,17.5L84.2,0L113.4,29.2L84.2,58.4L84.2,40.9L0,40.9" fill="url(#lg2)" stroke="#6d6d6d"/></g><g id="shape4" transform="translate(349.61,174.5)"><text class="st1"><tspan x="9" y="14">SpaceFilter</tspan></text></g><g id="shape5" transform="translate(349.61,277.81)"><path d="M2,19.5L86.2,19.5L86.2,2L115.4,31.2L86.2,60.4L86.2,42.9L2,42.9" fill="#000000" fill-opacity="0.08"/><path d="M0,17.5L84.2,17.5L84.2,0L113.4,29.2L84.2,58.4L84.2,40.9L0,40.9" fill="url(#lg2)" stroke="#6d6d6d"/></g><g id="shape6" transform="translate(359.61,298.69)"><text class="st1"><tspan x="6" y="14">UpcaseFilter</tspan></text></g><path d="M0,4C0,1.8,1.8,0,4,0C6.2,0,8,1.8,8,4C8,6.2,6.2,8,4,8C1.8,8,0,6.2,0,4z" id="shape7" fill="#000000" transform="translate(393.11,373.78)"/><path d="M0,4C0,1.8,1.8,0,4,0C6.2,0,8,1.8,8,4C8,6.2,6.2,8,4,8C1.8,8,0,6.2,0,4z" id="shape8" fill="#000000" transform="translate(393.11,411.93)"/><path d="M0,4C0,1.8,1.8,0,4,0C6.2,0,8,1.8,8,4C8,6.2,6.2,8,4,8C1.8,8,0,6.2,0,4z" id="shape9" fill="#000000" transform="translate(393.11,392.85)"/></svg></div>
        <div id="copyright">Powered by <a href="https://www.edrawsoft.com/" target="_blank" title="edrawsoft">Edraw Max</a></div>
      </div>
      <div id="navBar">
        <div id="nav-thumbs">
          <div class="nav-thumb">
            <div>
              <span class="number">
                <span class="pagenum">1</span>
              </span>
              <a href="#page1">
                <img src=""/>
              </a>
            </div>
            <p>页-1</p>
          </div>
        </div>
      </div>
    </div>
    <script>
        const svgs=document.getElementById("svg-container").children;
        const UA=window.navigator.userAgent;
        const ua=(UA.indexOf('rv:11')+UA.indexOf('Firefox'))>=0;
        const svgcount=document.getElementById('svg-container').childElementCount;
        var styleArr=[];
        var heightArr=[];
        var navBar=document.getElementById('navBar');
        var conInfo=document.getElementById('content-info');
        for(var i=0;i<svgcount;i++){
            styleArr[i] = {width:svgs[i].getAttribute('width'),height:svgs[i].getAttribute('height')}
        }
        window.onresize=function () {
            renavstyle();
            resvgstyle();
        };
        window.onscroll=renavstyle;
        window.onload=function () {
            renavstyle();
            var sideWidth=navBar.offsetWidth;
            document.getElementById('content-info').style.marginRight=sideWidth+'px';
            document.getElementById('main-content').style.marginRight=sideWidth+'px';
            resvgstyle();
            doscroll();
        };
        function recontainstyle() {
            var topHeight=conInfo.clientHeight;
            var svgHeight=0;
            for(var i=0;i<svgcount;i++){
                heightArr[i]=svgs[i].getBoundingClientRect().height+10;
                svgHeight+=svgs[i].clientHeight ||svgs[i].getBoundingClientRect().height;
            }
            var fullHeight=svgHeight+Number(topHeight);
            if(fullHeight<window.innerHeight){
            document.getElementById('copyright').style.position='absolute';
            document.getElementById('copyright').style.transform ='translateX(-50%)';
            document.getElementById('main-content').style.position='absolute';
            document.getElementById('main-content').style.top=topHeight+'px';
        }else{
            document.getElementById('copyright').style.position='';
            document.getElementById('copyright').style.transform ='';
            document.getElementById('main-content').style.position='';
        }
        }
        function resvgstyle() {
            var sideWidth=navBar.offsetWidth+20;
            for(var i=0;i<svgcount;i++){
                var oriWidth = styleArr[i].width;
                var oriHeight = styleArr[i].height;
                var percent = oriHeight / oriWidth;
                var innerWidth=document.body.offsetWidth-sideWidth;
                if (innerWidth <= oriWidth) {
                    svgs[i].removeAttribute('width');
                    svgs[i].removeAttribute('height');
                    if (ua) {
                        svgs[i].setAttribute('height',innerWidth*percent);
                    }
                }else {
                    svgs[i].setAttribute('width', oriWidth);
                    svgs[i].setAttribute('height', oriHeight);
                }
            }
            recontainstyle();
        }
        function renavstyle() {
            var topHeight=conInfo.clientHeight;
            var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
            if(scrollTop>topHeight){
                document.getElementById('navBar').style.top=0+'px';
            }else{
                document.getElementById('navBar').style.top=topHeight-scrollTop+'px';
            }
            doscroll();
        }
        function doscroll() {
            var topHeight=conInfo.clientHeight;
            var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
            for(var i=0;i<svgcount;i++){
                var sum=0;
                for(var j=0;j<=i;j++){
                    sum+=heightArr[j];
                }
                if(scrollTop+window.innerHeight/2-topHeight-sum<0){
                    var sub=Number(i)+1;
                    if(document.querySelector('#nav-thumbs .selected')){
                        document.querySelector('#nav-thumbs .selected').classList.remove('selected');
                    }
                    document.querySelector('.nav-thumb:nth-of-type('+sub+')').classList.add('selected');
                    break;
                }
            }
        }
        var navs=document.querySelectorAll('.nav-thumb');
        for(i=0;i<navs.length;i++){
            navs[i].children[0].onclick=function () {
                document.querySelector('#nav-thumbs .selected').classList.remove('selected');
                this.parentNode.classList.add('selected');
            }
        }
</script>
  </body>
</html>
